<template>
  <view class="content">
    <view class="text-area">
      <rich-text class="title" :nodes="sum"></rich-text>
    </view>
    <view class="flex">
      <image class="logo" :src="arr[nums[0]]"></image>
      <image class="logo" :src="arr[nums[1]]"></image>
      <image class="logo , aa"  :src="arr[nums[2]]"></image>
    </view>
    <view class="btn" v-show="!flag"><button type="primary" @click="start">开始</button></view>
    <view class="btn" v-show="flag"><button type="warn" @click="startll">停止</button></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        flag:false,
        timer: null,
        sum: "点击开始按钮摇骰子",
        nums: [0, 0, 0],
        arr: ['/static/1-point.png', '/static/2-point.png', '/static/3-point.png', '/static/4-point.png',
          '/static/5-point.png', '/static/6-point.png'
        ]
      };
    },
    onLoad() {
      this.picFn();
      let num = 0;
      this.nums.forEach(item => {
        num += item
      });
      // this.sum = `分数：${num+3}`;
    },
    methods: {
      start() {
        this.flag=true
        clearInterval(this.timer);
        this.sum = "等待计算中";
        this.timer = setInterval(this.picFn, 50);
        setTimeout(() => {
          clearInterval(this.timer);
          let num = 0;
          this.nums.forEach(item => {
            num += item
          });
          this.sum = `分数：${num+3}`;
           this.flag=false
        }, 3000);
      },
      startll(){
        let num = 0;
        this.nums.forEach(item => {
          num += item
        });
        this.sum = `分数：${num+3}`;
        clearInterval(this.timer);
        this.flag=false
      },
      randNum: () => Math.floor(Math.random() * 6),
      picFn() {
        this.nums = this.nums.map(item => this.randNum())
      },

    }
  };
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 50rpx;
    margin-left: 100rpx;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
  .btn{
    width: 80%;
  }
  .aa{
	  margin-left: 120px;
  }
</style>
